<template>
  <div id="products">
    <van-tabs v-model="active" scrollspy sticky>
      <van-tab title="商品">
        <base-info @select-sku="handleShowSku" @select-area="handleShowArea" :addName="Areadata" :pro-data="proData"> </base-info>
      </van-tab>
      <van-tab title="评价">
        <comment />
      </van-tab>
      <van-tab title="详情"> 详情 </van-tab>
      <van-tab title="推荐"> 推荐 </van-tab>
    </van-tabs>
    <sku-popup ref="sku-popup" :proData="proData"></sku-popup>
    <Area ref="add-area" @getArea="getArea"></Area>
    <GoodsAction />
  </div>
</template>
<script>
import {Get} from '../gp.js'
import GoodsAction from "../components/products/GoodsAction.vue";
import BaseInfo from "../components/products/BaseInfo.vue";
import Comment from "../components/products/Comment.vue";
import SkuPopup from "../components/products/SkuPopup.vue";
import Area from '../components/products/Area.vue'
export default {
  components: {
    GoodsAction,
    BaseInfo,
    Comment,
    SkuPopup,
    Area
  },
  created(){
    console.log( this.$route.query.gid );
    this.getData()
  },
  // mounted(){
  //   let url='/goods/details';
  //   let data={};
  //   data.gid=1;
  //   Get(url,data).then((res)=>{
  //     console.log(res)
  //   })
  // },
  data() {
    return {
      active: 0,
      Areadata:'江苏省南京市雨花区',
      proData:[]
    };
  },
  methods: {
    handleShowSku() {
      this.$refs["sku-popup"]["isShow"] = true;
    },
    handleShowArea(){
      this.$refs["add-area"]["isShow"] = true;
    },
    getArea(data){
      this.Areadata=data;
      console.log(this.Areadata)
    },
    getData(){
      let gid=this.$route.query.gid;
      let data={};
      let url='/goods/details?gid='+gid;
      Get(url,data).then((res)=>{
           this.proData=res.data.data;
           console.log(this.proData)
      })
    }
  },
};
</script>
<style scoped lang="scss">
#products {
  .van-tabs {
    ::v-deep .van-tabs__content {
      background-color: #f5f5f5;
      .van-tab__pane {
        background-color: #fff;
        border-radius: 0 0 0.75rem 0.75rem;
        margin-bottom: 0.75rem;
      }
    }
  }
}
</style>